گشودن قفل جادوی CSS: نگاهی عمیق به @property و تعریف نوع خصوصیات سفارشی

خصوصیات سفارشی CSS (که با نام متغیرهای CSS نیز شناخته می‌شوند) روش نوشتن و نگهداری CSS را متحول کرده‌اند. آن‌ها قابلیت استفاده مجدد، انعطاف‌پذیری و قابلیت نگهداری را ارائه می‌دهند و شیوه‌نامه‌های ما را پویاتر و قابل مدیریت‌تر می‌کنند. با این حال، تا همین اواخر، خصوصیات سفارشی فاقد توانایی تعریف نوع داده مورد انتظار خود بودند که پتانسیل آن‌ها را برای استایل‌دهی و انیمیشن‌های پیشرفته محدود می‌کرد. اینجاست که قانون @property وارد می‌شود – یک تغییردهنده بازی که به ما امکان می‌دهد نوع، سینتکس و مقدار اولیه خصوصیات سفارشی خود را به صراحت تعریف کنیم.

قانون @property چیست؟

قانون @property بخشی از خانواده APIهای هودینی CSS (CSS Houdini) است که هدف آن در دسترس قرار دادن کارکردهای داخلی موتور CSS برای توسعه‌دهندگان است. به طور خاص، @property بخشی از API خصوصیات و مقادیر سفارشی (Custom Properties and Values API) است. این قانون به شما امکان می‌دهد یک خصوصیت سفارشی را در مرورگر ثبت کنید و موارد زیر را برای آن مشخص نمایید:

• name: نام خصوصیت سفارشی (مانند --my-color).
• syntax: نوع داده مورد انتظار برای خصوصیت (مانند <color>، <number>، <length>).
• inherits: تعیین می‌کند که آیا خصوصیت باید مقدار خود را از عنصر والد به ارث ببرد یا خیر (true یا false).
• initial-value: مقدار پیش‌فرض خصوصیت در صورتی که هیچ مقدار دیگری مشخص نشده باشد.

با تعریف این ویژگی‌ها، شما کنترل بیشتری بر نحوه استفاده و رفتار خصوصیات سفارشی، به ویژه در انیمیشن‌ها و ترنزیشن‌ها، به دست می‌آورید.

چرا از @property استفاده کنیم؟ مزایا

استفاده از @property چندین مزیت قابل توجه دارد:

۱. ایمنی نوع داده و اعتبارسنجی

بدون @property، CSS با تمام خصوصیات سفارشی به عنوان رشته (string) رفتار می‌کند. این موضوع می‌تواند منجر به رفتار غیرمنتظره‌ای شود، زمانی که شما سعی می‌کنید از آن‌ها در محاسبات یا انیمیشن‌هایی که به انواع داده خاصی نیاز دارند، استفاده کنید. برای مثال، اگر قصد دارید یک خصوصیت سفارشی یک عدد را نشان دهد اما به طور تصادفی یک مقدار رشته‌ای به آن اختصاص دهید، ممکن است انیمیشن‌های شما خراب شوند یا نتایج نادرستی تولید کنند.

@property این مشکل را با اجازه دادن به شما برای مشخص کردن سینتکس (نوع داده) مورد انتظار برای خصوصیت سفارشی حل می‌کند. سپس مرورگر مقدار اختصاص داده شده را با این سینتکس اعتبارسنجی می‌کند و اطمینان حاصل می‌کند که با نوع مورد انتظار مطابقت دارد. اگر مقدار با سینتکس مطابقت نداشته باشد، مرورگر از مقدار اولیه (در صورت ارائه) استفاده می‌کند یا خصوصیت را نامعتبر در نظر می‌گیرد.

۲. انیمیشن‌ها و ترنزیشن‌های روان

قدرت واقعی @property در مورد انیمیشن‌ها و ترنزیشن‌ها آشکار می‌شود. بدون آن، انیمیت کردن خصوصیات سفارشی می‌تواند دشوار باشد زیرا مرورگر نمی‌داند چگونه بین مقادیر مختلف یک رشته عمومی درون‌یابی کند. ممکن است مجبور شوید به ترفندهای جاوااسکریپت متوسل شوید یا از ویژگی‌های محدود CSS برای دستیابی به اثر مورد نظر استفاده کنید.

با تعریف سینتکس یک خصوصیت سفارشی، شما به مرورگر می‌گویید که چگونه بین مقادیر آن در طول انیمیشن‌ها و ترنزیشن‌ها درون‌یابی کند. برای مثال، اگر یک خصوصیت سفارشی را با سینتکس <color> تعریف کنید، مرورگر می‌داند که باید بین رنگ‌ها با استفاده از یک گرادیان رنگی روان درون‌یابی کند. به طور مشابه، اگر یک خصوصیت را با سینتکس <number> تعریف کنید، مرورگر می‌داند که باید بین اعداد با استفاده از یک پیشرفت خطی درون‌یابی کند.

۳. بهبود خوانایی و قابلیت نگهداری کد

@property خوانایی و قابلیت نگهداری کد CSS شما را با روشن کردن اینکه یک خصوصیت سفارشی چه نوع داده‌ای را باید نشان دهد، بهبود می‌بخشد. این به دیگر توسعه‌دهندگان (و خود آینده شما) کمک می‌کند تا هدف خصوصیت و نحوه استفاده از آن را درک کنند.

علاوه بر این، با تعریف صریح مقدار اولیه یک خصوصیت سفارشی، شما یک مقدار بازگشتی (fallback) واضح ارائه می‌دهید که در صورت عدم مشخص شدن مقدار دیگری، استفاده خواهد شد. این می‌تواند از اشکالات بصری غیرمنتظره جلوگیری کرده و کد شما را قوی‌تر کند.

۴. بهبود عملکرد

در برخی موارد، استفاده از @property می‌تواند عملکرد کد CSS شما را بهبود بخشد. با ارائه اطلاعات بیشتر به مرورگر در مورد انواع داده مورد انتظار خصوصیات سفارشی شما، به آن اجازه می‌دهید فرآیند رندر را بهینه کند. این می‌تواند منجر به انیمیشن‌ها و ترنزیشن‌های سریع‌تر شود، به ویژه در طرح‌بندی‌های پیچیده.

سینتکس @property

قانون @property با استفاده از سینتکس زیر تعریف می‌شود:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

بیایید هر یک از این مؤلفه‌ها را بررسی کنیم:

• --property-name: این نام خصوصیت سفارشی است که شما در حال تعریف آن هستید. باید با دو خط تیره (--) شروع شود و می‌تواند شامل هر کاراکتر معتبر شناسه CSS باشد. برای مثال: --primary-color، --font-size، --spacing-unit.
• syntax: این نوع داده مورد انتظار خصوصیت سفارشی را مشخص می‌کند. با استفاده از توصیف‌گر نوع مقدار CSS تعریف می‌شود. برخی از مقادیر رایج سینتکس عبارتند از:
• <color>: یک مقدار رنگ را نشان می‌دهد (مثلاً #ffffff، rgb(255, 255, 255)، hsl(0, 0%, 100%)، white).
• <number>: یک مقدار عددی را نشان می‌دهد (مثلاً 1، 3.14، -42).
• <length>: یک مقدار طول را نشان می‌دهد (مثلاً 10px، 2em، 50vh، 1rem).
• <percentage>: یک مقدار درصدی را نشان می‌دهد (مثلاً 50%، 100%، 25.5%).
• <string>: یک مقدار رشته‌ای را نشان می‌دهد (مثلاً "Hello"، "World").
• <image>: یک مقدار تصویر را نشان می‌دهد (مثلاً url("image.jpg")، linear-gradient(...)).
• <angle>: یک مقدار زاویه را نشان می‌دهد (مثلاً 45deg، 0.5rad، 1turn).
• *: هر مقدار معتبر CSS را نشان می‌دهد. با احتیاط استفاده کنید، زیرا هدف بررسی نوع را از بین می‌برد.
• سینتکس سفارشی: به شما امکان می‌دهد سینتکس‌های پیچیده را با استفاده از الگوهای شبه-عبارات منظم تعریف کنید.
• inherits: این مقدار بولین تعیین می‌کند که آیا خصوصیت سفارشی باید مقدار خود را از عنصر والد به ارث ببرد یا خیر. اگر روی true تنظیم شود، خصوصیت به ارث برده می‌شود. اگر روی false تنظیم شود، خصوصیت به ارث برده نمی‌شود و اگر به صراحت روی عنصر تعریف نشده باشد، از مقدار اولیه خود استفاده می‌کند. مقدار پیش‌فرض false است.
• initial-value: این مقدار پیش‌فرض خصوصیت سفارشی را مشخص می‌کند. اگر خصوصیت به صراحت روی یک عنصر تنظیم نشده باشد، از این مقدار استفاده خواهد کرد. مقدار اولیه باید یک مقدار معتبر مطابق با سینتکس مشخص شده باشد. اگر مقدار اولیه‌ای ارائه نشود و هیچ مقدار دیگری تنظیم نشود، با خصوصیت طوری رفتار می‌شود که گویی مقدار تنظیم‌نشده خود را دارد.

مثال‌های عملی از @property در عمل

بیایید به چند مثال عملی از نحوه استفاده از @property در کد CSS خود نگاهی بیندازیم.

مثال ۱: انیمیت کردن یک رنگ

در این مثال، یک خصوصیت سفارشی به نام --background-color ایجاد کرده و آن را با استفاده از ترنزیشن‌های CSS انیمیت می‌کنیم. ما سینتکس را به عنوان <color> تعریف می‌کنیم تا اطمینان حاصل کنیم که مرورگر به درستی بین رنگ‌ها درون‌یابی می‌کند.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

در این کد:

• ما یک خصوصیت سفارشی --background-color با سینتکس <color> تعریف می‌کنیم، inherits را روی false و initial-value را روی سفید (#ffffff) تنظیم می‌کنیم.
• ما این خصوصیت را به background-color یک عنصر .box با استفاده از var(--background-color) اعمال می‌کنیم.
• ما یک ترنزیشن به خصوصیت --background-color اضافه می‌کنیم تا هنگام تغییر مقدار، به آرامی انیمیت شود.
• ما مقدار --background-color را در حالت هاور (hover) به آبی (#007bff) تغییر می‌دهیم که یک افکت ترنزیشن رنگی روان ایجاد می‌کند.

مثال ۲: انیمیت کردن یک عدد

در این مثال، یک خصوصیت سفارشی به نام --blur-radius ایجاد کرده و آن را با استفاده از ترنزیشن‌های CSS انیمیت می‌کنیم. ما سینتکس را به عنوان <length> تعریف می‌کنیم تا اطمینان حاصل کنیم که مرورگر به درستی بین مقادیر طول درون‌یابی می‌کند. این مثال همچنین یک مورد استفاده محبوب از طول‌ها را نشان می‌دهد: مقادیر پیکسل. این می‌تواند به راحتی به انواع واحدهای دیگر نیز ترجمه شود. همچنین توجه به این نکته مهم است که تنظیم مقدار اولیه روی `0px` حیاتی است، زیرا مرورگر برای انجام صحیح ترنزیشن‌ها به یک واحد پایه نیاز دارد.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

در این کد:

• ما یک خصوصیت سفارشی --blur-radius با سینتکس <length> تعریف می‌کنیم، inherits را روی false و initial-value را روی 0px تنظیم می‌کنیم.
• ما این خصوصیت را به تابع filter: blur() یک عنصر .image با استفاده از var(--blur-radius) اعمال می‌کنیم.
• ما یک ترنزیشن به خصوصیت --blur-radius اضافه می‌کنیم تا هنگام تغییر مقدار، به آرامی انیمیت شود.
• ما مقدار --blur-radius را در حالت هاور به 5px تغییر می‌دهیم که یک افکت تاری روان ایجاد می‌کند.

مثال ۳: ایجاد یک رابط کاربری تم‌دار با خصوصیات موروثی

در این مثال، یک رابط کاربری تم‌دار ساده با استفاده از خصوصیات سفارشی موروثی ایجاد می‌کنیم. ما یک خصوصیت سفارشی به نام --theme-color تعریف کرده و آن را روی عنصر :root تنظیم می‌کنیم. این به تمام عناصر فرزند امکان می‌دهد رنگ تم را به ارث ببرند.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

در این کد:

• ما یک خصوصیت سفارشی --theme-color با سینتکس <color> تعریف می‌کنیم، inherits را روی true و initial-value را روی سبز (#4caf50) تنظیم می‌کنیم.
• ما مقدار --theme-color را روی عنصر :root تنظیم می‌کنیم و آن را برای تمام عناصر در سند در دسترس قرار می‌دهیم.
• ما از این خصوصیت برای تنظیم background-color یک عنصر .button استفاده می‌کنیم.
• ما مقدار --theme-color را در حالت هاور به سبز تیره‌تر (#388e3c) تغییر می‌دهیم و نشان می‌دهیم که چگونه خصوصیات موروثی می‌توانند به راحتی برای تغییر تم رابط کاربری به‌روز شوند.

مثال ۴: تعریف یک سینتکس سفارشی

خصوصیت syntax می‌تواند یک رشته نیز بپذیرد تا یک الگوی خاص‌تر را تعریف کند، که به ویژه برای اعتبارسنجی مقادیر پیچیده‌تر مفید است. این سینتکس از یک سیستم شبه-عبارات منظم استفاده می‌کند که در MDN (شبکه توسعه‌دهندگان موزیلا) مستند شده است. این مثال نشان می‌دهد که چگونه یک سینتکس سفارشی برای موقعیت پس‌زمینه تعریف و استفاده کنیم که هر دو گزینه کلمه کلیدی `top`، `bottom`، `left` و `right` را به عنوان مقادیر معتبر می‌پذیرد.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

در اینجا، syntax با استفاده از یک نمایش رشته‌ای از کلمات کلیدی معتبر مشخص شده است. نماد [ ] مجموعه‌ای از گزینه‌ها را تعریف می‌کند، نماد | آن‌ها را جدا می‌کند و {1,2} تعداد مقادیر مجاز را به یک یا دو کلمه کلیدی محدود می‌کند. اگر از یک مقدار نامعتبر مانند `center` استفاده شود، مرورگر به initial-value یعنی `top left` بازمی‌گردد.

پشتیبانی مرورگرها

پشتیبانی مرورگرها از @property به طور کلی در مرورگرهای مدرن خوب است، از جمله:

• کروم (نسخه ۶۴ و بالاتر)
• اج (نسخه ۷۹ و بالاتر - بر پایه کرومیوم)
• فایرفاکس (نسخه ۷۲ و بالاتر)
• سافاری (نسخه ۱۴.۱ و بالاتر)

با این حال، همیشه ایده خوبی است که آخرین جداول سازگاری مرورگرها را در وب‌سایت‌هایی مانند Can I use... بررسی کنید تا اطمینان حاصل کنید که ویژگی‌هایی که استفاده می‌کنید در مرورگرهایی که کاربران شما احتمالاً از آن‌ها استفاده می‌کنند، پشتیبانی می‌شوند.

برای مرورگرهای قدیمی‌تر که از @property پشتیبانی نمی‌کنند، مرورگر قانون @property را نادیده می‌گیرد و به سادگی با خصوصیت سفارشی به عنوان یک متغیر CSS معمولی رفتار می‌کند. این بدان معناست که انیمیشن‌ها و ترنزیشن‌ها ممکن است آنطور که انتظار می‌رود کار نکنند، اما کد همچنان کاربردی خواهد بود.

بهترین شیوه‌ها برای استفاده از @property

در اینجا چند بهترین شیوه برای به خاطر سپردن هنگام استفاده از @property آورده شده است:

• همیشه سینتکس را تعریف کنید: مطمئن شوید که همیشه syntax خصوصیات سفارشی خود را تعریف می‌کنید تا از ایمنی نوع داده اطمینان حاصل کرده و انیمیشن‌ها و ترنزیشن‌های روان را فعال کنید.
• یک مقدار اولیه تنظیم کنید: یک initial-value برای ارائه یک مقدار پیش‌فرض و جلوگیری از اشکالات بصری غیرمنتظره فراهم کنید.
• از نام‌های توصیفی استفاده کنید: نام‌های توصیفی برای خصوصیات سفارشی خود انتخاب کنید که به وضوح هدف و نوع داده آن‌ها را نشان دهد. برای مثال، به جای --color از --button-background-color استفاده کنید.
• وراثت را در نظر بگیرید: تصمیم بگیرید که آیا خصوصیات سفارشی شما باید از عناصر والد خود به ارث ببرند یا خیر. از inherits: true برای خصوصیاتی استفاده کنید که باید در سراسر رابط کاربری به اشتراک گذاشته شوند، مانند رنگ‌های تم یا اندازه‌های فونت.
• به طور کامل تست کنید: کد خود را در مرورگرهای مختلف تست کنید تا اطمینان حاصل کنید که همانطور که انتظار می‌رود کار می‌کند. از مکانیزم‌های بازگشتی برای مرورگرهای قدیمی‌تر که از @property پشتیبانی نمی‌کنند، استفاده کنید.
• خصوصیات سفارشی خود را مستند کنید: به کد CSS خود کامنت اضافه کنید تا هدف و کاربرد خصوصیات سفارشی خود را توضیح دهید. این کار درک کد شما را برای دیگر توسعه‌دهندگان (و خود آینده شما) آسان‌تر می‌کند. ابزارهایی مانند Stylelint نیز می‌توانند برای اعمال این بهترین شیوه‌ها پیکربندی شوند.

@property و هودینی CSS

همانطور که قبلاً ذکر شد، @property بخشی از خانواده APIهای هودینی CSS است. هودینی CSS مجموعه‌ای از APIهای سطح پایین است که کارکردهای داخلی موتور CSS را برای توسعه‌دهندگان آشکار می‌کند و به آن‌ها امکان می‌دهد CSS را با ویژگی‌ها و رفتارهای سفارشی گسترش دهند.

سایر APIهای هودینی عبارتند از:

• Paint API: به شما امکان می‌دهد تصاویر پس‌زمینه، حاشیه‌ها و ماسک‌های سفارشی را با استفاده از جاوااسکریپت تعریف کنید.
• Animation Worklet API: به شما امکان می‌دهد انیمیشن‌های با کارایی بالا را با استفاده از جاوااسکریپت ایجاد کنید.
• Layout API: به شما امکان می‌دهد الگوریتم‌های چیدمان سفارشی برای عناصر، مانند سیستم‌های گرید یا چیدمان‌های ماسونری تعریف کنید.
• Parser API: به شما امکان می‌دهد کد CSS را با استفاده از جاوااسکریپت تجزیه و تحلیل و دستکاری کنید.

با ترکیب @property با سایر APIهای هودینی، می‌توانید راه‌حل‌های CSS واقعاً قدرتمند و قابل تنظیم ایجاد کنید.

نتیجه‌گیری

قانون @property یک افزودنی قدرتمند به CSS است که به شما امکان می‌دهد انواع خصوصیات سفارشی را تعریف کنید و استایل‌دهی پیشرفته، انیمیشن‌ها و ترنزیشن‌ها را فعال کنید. با استفاده از @property، می‌توانید ایمنی نوع داده، خوانایی، قابلیت نگهداری و عملکرد کد CSS خود را بهبود بخشید.

در حالی که پشتیبانی مرورگرها به طور کلی خوب است، مهم است که کد خود را در مرورگرهای مختلف تست کنید و مکانیزم‌های بازگشتی برای مرورگرهای قدیمی‌تر که از @property پشتیبانی نمی‌کنند، فراهم کنید.

با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید از قدرت @property برای ایجاد تجربیات وب واقعاً شگفت‌انگیز استفاده کنید.

برای مطالعه بیشتر

• مستندات وب MDN: @property
• Houdini.how: راهنمای هودینی CSS
• آیا می‌توانم از @property استفاده کنم؟